/* eslint-disable no-unused-vars */
/* eslint-disable eqeqeq */
/* eslint-disable max-params */
/* eslint-disable no-inner-declarations */
/* eslint-disable no-var */
let m3d = (function () {
    /* ---- private vars ---- */
    let diapo = [];
    let imb;
    let scr;
    let bar;
    let selected;
    let urlInfo;
    let imagesPath = 'images/';
    let camera = { x: 0, y: 0, z: -650, s: 0, fov: 500 };
    let nw = 0;
    let nh = 0;
    /* ==== camera tween methods ==== */
    camera.setTarget = function (c0, t1, p) {
        if (Math.abs(t1 - c0) > 0.1) {
            camera.s = 1;
            camera.p = 0;
            camera.d = t1 - c0;
            if (p) {
                camera.d *= 2;
                camera.p = 9;
            }
        }
    };
    camera.tween = function (v) {
        if (camera.s != 0) {
            camera.p += camera.s;
            camera[v] += camera.d * camera.p * 0.01;
            if (camera.p == 10) camera.s = -1;
            else if (camera.p == 0) camera.s = 0;
        }
        return camera.s;
    };
    /* ==== diapo constructor ==== */
    let Diapo = function (n, img, x, y, z) {
        if (img) {
            this.url = img.url;
            this.path = img.path;
            this.title = img.title;
            this.color = img.color;
            this.isLoaded = false;
            if (document.createElement('canvas').getContext) {
                /* ---- using canvas in place of images (performance trick) ---- */
                this.srcImg = new Image();
                this.srcImg.src = img.src;
                this.img = document.createElement('canvas');
                this.canvas = true;
                scr.appendChild(this.img);
            } else {
                /* ---- normal image ---- */
                this.img = document.createElement('img');
                this.img.src = img.src;
                scr.appendChild(this.img);
            }
            /* ---- on click event ---- */
            this.img.onclick = function () {
                if (camera.s) return;
                if (this.diapo.isLoaded) {
                    if (this.diapo.urlActive) {
                        /* ---- jump hyperlink ---- */
                        console.log('router push', this.diapo);
                        // top.location.href = this.diapo.url;
                        wf.getModule('router').push({
                            path: this.diapo.path
                        })

                    } else {
                        /* ---- target positions ---- */
                        console.log('移动前', camera.tz, camera.tx, camera.ty, document.body.clientWidth);
                        camera.tz = this.diapo.z - camera.fov - 330 * (375 / document.body.clientWidth);
                        camera.tx = this.diapo.x;
                        camera.ty = this.diapo.y + 100;
                        console.log('移动箭头', camera.tz, camera.tx, camera.ty);

                        /* ---- disable previously selected img ---- */
                        if (selected) {
                            selected.but.className =
                                'button viewed';
                            selected.img.className = '';
                            selected.img.style.cursor = 'pointer';
                            selected.urlActive = false;
                            urlInfo.style.visibility = 'hidden';
                        }
                        /* ---- select current img ---- */
                        this.diapo.but.className =
                            'button selected';
                        interpolation(false);
                        selected = this.diapo;
                    }
                }
            };
            /* ---- command bar buttons ---- */
            this.but = document.createElement('div');
            this.but.className = 'button';
            bar.appendChild(this.but);
            this.but.diapo = this;
            this.but.style.left =
                Math.round(this.but.offsetWidth * 1.2 * (n % 4)) +
                'px';
            this.but.style.top =
                Math.round(
                    this.but.offsetHeight * 1.2 * Math.floor(n / 4)
                ) + 'px';
            this.but.onclick = this.img.onclick;
            imb = this.img;
            this.img.diapo = this;
            this.zi = 25000;
        } else {
            /* ---- transparent div ---- */
            this.img = document.createElement('div');
            this.isLoaded = true;
            this.img.className = 'fog';
            scr.appendChild(this.img);
            this.w = 300;
            this.h = 300;
            this.zi = 15000;
        }
        /* ---- object variables ---- */
        this.x = x;
        this.y = y;
        this.z = z;
        this.css = this.img.style;
    };
    /* ==== main 3D animation ==== */
    Diapo.prototype.anim = function () {
        if (this.isLoaded) {
            /* ---- 3D to 2D projection ---- */
            let x = this.x - camera.x;
            let y = this.y - camera.y;
            let z = this.z - camera.z;
            if (z < 20) z += 5000;
            let p = camera.fov / z;
            let w = this.w * p;
            let h = this.h * p;
            /* ---- HTML rendering ---- */
            this.css.left = Math.round(nw + x * p - w * 0.5) + 'px';
            this.css.top = Math.round(nh + y * p - h * 0.5) + 'px';
            this.css.width = Math.round(w) + 'px';
            this.css.height = Math.round(h) + 'px';
            this.css.zIndex = this.zi - Math.round(z);
        } else {
            /* ---- image is loaded? ---- */
            this.isLoaded = this.loading();
        }
    };
    /* ==== onload initialization ==== */
    Diapo.prototype.loading = function () {
        if (
            (this.canvas && this.srcImg.complete) ||
            this.img.complete
        ) {
            if (this.canvas) {
                /* ---- canvas version ---- */
                console.log('图片宽高', this.srcImg.width / 2, this.srcImg.height / 2);
                this.w = 610;
                this.h = this.srcImg.height * (610 / this.srcImg.width);
                this.img.width = this.w;
                this.img.height = this.h;
                let context = this.img.getContext('2d');
                context.drawImage(
                    this.srcImg,
                    0,
                    0,
                    this.w,
                    this.h
                );
            } else {
                /* ---- plain image version ---- */
                this.w = this.img.width;
                this.h = this.img.height;
            }
            /* ---- button loaded ---- */
            this.but.className += ' loaded';
            return true;
        }
        return false;
    };
    // //////////////////////////////////////////////////////////////////////////
    /* ==== screen dimensions ==== */
    let resize = function () {
        nw = scr.offsetWidth * 0.5;
        nh = scr.offsetHeight * 0.5;
    };
    /* ==== disable interpolation during animation ==== */
    var interpolation = function (bicubic) {
        let i = 0;
        let o;
        while ((o = diapo[i++])) {
            if (o.but) {
                o.css.msInterpolationMode = bicubic
                    ? 'bicubic'
                    : 'nearest-neighbor'; // makes IE8 happy
                o.css.imageRendering = bicubic
                    ? 'optimizeQuality'
                    : 'optimizeSpeed'; // does not really work...
            }
        }
    };
    /* ==== init script ==== */
    let init = function (data) {
        /* ---- containers ---- */
        scr = document.getElementById('screen');
        bar = document.getElementById('bar');
        urlInfo = document.getElementById('urlInfo');
        resize();
        /* ---- loading images ---- */
        let i = 0;
        let o;
        let n = data.length;
        while ((o = data[i++])) {
            /* ---- images ---- */
            var x = 1000 * ((i % 4) - 1.5);
            var y = Math.round(Math.random() * 4000) - 2000;
            let z = i * (5000 / n);
            diapo.push(new Diapo(i - 1, o, x, y, z));
            /* ---- transparent frames ---- */
            let k = diapo.length - 1;
            for (let j = 0; j < 3; j++) {
                var x = Math.round(Math.random() * 4000) - 2000;
                var y = Math.round(Math.random() * 4000) - 2000;
                diapo.push(new Diapo(k, null, x, y, z + 100));
            }
        }
        /* ---- start engine ---- */
        run();
    };
    // //////////////////////////////////////////////////////////////////////////
    /* ==== main loop ==== */
    var run = function () {
        /* ---- x axis move ---- */
        if (camera.tx) {
            if (!camera.s) camera.setTarget(camera.x, camera.tx);
            var m = camera.tween('x');
            if (!m) camera.tx = 0;
            /* ---- y axis move ---- */
        } else if (camera.ty) {
            if (!camera.s) camera.setTarget(camera.y, camera.ty);
            var m = camera.tween('y');
            if (!m) camera.ty = 0;
            /* ---- z axis move ---- */
        } else if (camera.tz) {
            if (!camera.s) camera.setTarget(camera.z, camera.tz);
            var m = camera.tween('z');
            if (!m) {
                /* ---- animation end ---- */
                camera.tz = 0;
                interpolation(true);
                /* ---- activate hyperlink ---- */
                if (selected) {
                    selected.img.style.cursor = 'pointer';
                    selected.urlActive = true;
                    selected.img.className = 'href';
                    urlInfo.diapo = selected;
                    urlInfo.onclick = selected.img.onclick;
                    urlInfo.innerHTML =
                        selected.title || selected.url;
                    urlInfo.style.visibility = 'visible';
                    urlInfo.style.color = selected.color || '#fff';
                    urlInfo.style.top =
                        Math.round(
                            selected.img.offsetTop +
                            selected.img.offsetHeight -
                            urlInfo.offsetHeight -
                            5
                        ) + 'px';
                    urlInfo.style.left =
                        Math.round(
                            selected.img.offsetLeft +
                            selected.img.offsetWidth -
                            urlInfo.offsetWidth -
                            5
                        ) + 'px';
                } else {
                    selected.img.style.cursor = 'default';
                }
            }
        }
        /* ---- anim images ---- */
        let i = 0;
        let o;
        while ((o = diapo[i++])) o.anim();
        /* ---- loop ---- */
        setTimeout(run, 32);
    };
    return {
        // //////////////////////////////////////////////////////////////////////////
        /* ==== initialize script ==== */
        init: init,
    };
})();


export default m3d